<template>
	<view class="mobile-container">
		<view class="form-section">
			<view class="input-group">
				<text class="label">手机号</text>
				<input 
					class="input" 
					type="number" 
					maxlength="11"
					placeholder="请输入手机号"
					v-model="mobile"
				/>
			</view>
			<view class="input-group">
				<text class="label">验证码</text>
				<input 
					class="input code-input" 
					type="number" 
					maxlength="6"
					placeholder="请输入验证码"
					v-model="code"
				/>
				<view 
					class="code-btn" 
					:class="{'disabled': !canSendCode}"
					@click="sendCode"
				>
					{{codeText}}
				</view>
			</view>
		</view>
		
		<view class="submit-btn" @click="handleSubmit">确认绑定</view>
	</view>
</template>

<script>
import request from '@/utils/request'

export default {
	data() {
		return {
			mobile: '',
			code: '',
			countdown: 60,
			timer: null,
			isCounting: false,
			code_key: '' // 保存验证码key
		}
	},
	computed: {
		canSendCode() {
			return !this.isCounting && this.mobile.length === 11
		},
		codeText() {
			return this.isCounting ? `${this.countdown}s` : '获取验证码'
		}
	},
	methods: {
		// 发送验证码
		async sendCode() {
			if (!this.canSendCode) {
                uni.showToast({
                    title: '请输入正确的手机号',
                    icon: 'none'
                })
                return
            }
			
			try {
				const res = await request({
					url: '/wechat/common/sms/codeSend',
					data: {
						mobile: this.mobile
					}
				})
				
				if (res.code === 0) {
					// 保存code_key
					this.code_key = res.data.code_key
					
					uni.showToast({
						title: '验证码已发送',
						icon: 'none'
					})
					
					// 开始倒计时
					this.isCounting = true
					this.countdown = 60
					this.timer = setInterval(() => {
						if (this.countdown > 0) {
							this.countdown--
						} else {
							this.isCounting = false
							clearInterval(this.timer)
						}
					}, 1000)
				} else {
					uni.showToast({
						title: res.message || '发送失败',
						icon: 'none'
					})
				}
			} catch (err) {
				console.error('发送验证码失败', err)
				uni.showToast({
					title: '发送失败，请重试',
					icon: 'none'
				})
			}
		},
		
		// 提交绑定
		async handleSubmit() {
			if (!this.mobile || !this.code) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				})
				return
			}
			
			if (!this.code_key) {
				uni.showToast({
					title: '请先获取验证码',
					icon: 'none'
				})
				return
			}
			
			uni.showLoading({
				title: '绑定中...'
			})
			
			try {
				const res = await request({
					url: '/wechat/user/saveMobile',
					data: {
						mobile: this.mobile,
						code: this.code,
						code_key: this.code_key
					}
				})
				
				if (res.code === 0) {
					uni.showToast({
						title: '绑定成功',
						icon: 'success'
					})
					
					// 延迟跳转到个人中心
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: res.message || '绑定失败',
						icon: 'none'
					})
				}
			} catch (err) {
				console.error('绑定手机号失败', err)
				uni.showToast({
					title: '绑定失败，请重试',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		}
	},
	onUnload() {
		// 页面卸载时清除定时器
		if (this.timer) {
			clearInterval(this.timer)
		}
	}
}
</script>

<style>
.mobile-container {
	min-height: 100vh;
	background-color: #f8f9fc;
	padding: 30rpx;
}

.form-section {
	background-color: #ffffff;
	border-radius: 24rpx;
	padding: 30rpx;
	margin: 20rpx 0 60rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.input-group {
	display: flex;
	align-items: center;
	padding: 30rpx 20rpx;
	border-bottom: 2rpx solid #f0f2f7;
	position: relative;
}

.input-group:last-child {
	border-bottom: none;
}

.label {
	width: 140rpx;
	font-size: 30rpx;
	color: #333333;
	font-weight: 500;
}

.input {
	flex: 1;
	font-size: 30rpx;
	color: #333333;
	padding: 0 200rpx 0 20rpx;
}

.input::placeholder {
	color: #999999;
	font-size: 28rpx;
}

.code-input {
	flex: 1;
	padding-right: 220rpx;
}

.code-btn {
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 180rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	font-size: 26rpx;
	color: #2b85ff;
	border: 2rpx solid #2b85ff;
	border-radius: 32rpx;
	transition: all 0.3s;
	background-color: rgba(43, 133, 255, 0.05);
}

.code-btn:active {
	transform: translateY(-50%) scale(0.98);
	opacity: 0.9;
}

.code-btn.disabled {
	color: #b2b2b2;
	border-color: #e5e5e5;
	background-color: #f5f5f5;
}

.submit-btn {
	background: linear-gradient(135deg, #2b85ff, #3a90ff);
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 44rpx;
	margin: 0 20rpx;
	box-shadow: 0 8rpx 16rpx rgba(43, 133, 255, 0.2);
	transition: all 0.3s;
}

.submit-btn:active {
	transform: scale(0.98);
	box-shadow: 0 4rpx 8rpx rgba(43, 133, 255, 0.2);
}
</style>
